<template>
  <div>
    <!-- 最近更新管理 -->
    <!-- 按钮上面的导航 -->
    <!-- <el-row style="margin: 18px 0px 0px 18px "> -->
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>流水管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

     <!-- 搜索与添加按钮 -->
    <div style="margin-top: 15px; margin-left: 12px;">
      <el-input
        placeholder="请输入订单编号"
        v-model="queryKey1"
        style="width: 250px;float:left;"
        clearable
      >
      </el-input>
       <el-button style="float:left;" type="primary" @click="loadFlow()" icon="el-icon-search" >搜索</el-button>

    </div>
    <div style="margin-top: 15px; margin-left: 12px;">
      <el-button style="float:left;" type="primary" icon="el-icon-refresh" @click="loadFlow()" >刷新</el-button>
    </div>

    <el-card style="margin-top: 15px;margin: 15px 1%;width: 98%">
      <el-table :data="fromData" border style="width: 100%" :max-height="tableHeight">
        <el-table-column prop="flowId" label="流水id"></el-table-column>
        <el-table-column prop="orderId" label="订单id"></el-table-column>
        <el-table-column prop="payAmount" label="支付金额"></el-table-column>

        <el-table-column  label="支付方式">
          <template slot-scope="scope">
            <div v-if="scope.row.payMethod === 1">
              <el-tag type="success">现金</el-tag>
            </div>
            <div v-if="scope.row.payMethod === 0">
                <el-tag type="success">支付宝</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="productId" label="商品ID"></el-table-column>
        <el-table-column prop="trade_no" label="支付流水号（支付回调的id）"></el-table-column>

        <el-table-column prop="username" width="100" label="用户名" fit></el-table-column>
        <el-table-column prop="createTime" width="155" label="创建时间"></el-table-column>
        <el-table-column label="订单状态" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.isPay === 0">
                <el-tag type="success">线上支付成功</el-tag>
            </div>
            <div v-if="scope.row.isPay === 1">
                <el-tag type="success">现金支付成功</el-tag>
            </div>
            <div v-if="scope.row.isPay === 2">
              <el-tag type="warning">订单已退款</el-tag>
            </div>
            <div v-if="scope.row.isPay === 3">
              <el-tag type="warning">退款失败</el-tag>
            </div>
          </template>
        </el-table-column>
         <el-table-column prop="outRequestNo" label="系统退款号"></el-table-column>
        <el-table-column prop="flowDesc" label="退款说明"></el-table-column>

      </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'flow',
  data () {
    return {
      fromData: [],
      pageSize: 10,
      queryKey1: '',
      total: 0
    }
  },
  mounted () {
    this.loadFlow()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 300
    }
  },
  methods: {
    loadFlow () {
      var _this = this
      this.$axios.post('/admin/flow/' + this.pageSize + '/1?queryKey1=' + this.queryKey1).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.fromData = resp.data.result.content
          _this.total = resp.data.result.totalElements
           this.$message({
              type: 'success',
              message: '刷新成功'
            })
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.post('/admin/flow/' + this.pageSize + '/' + page + '/?queryKey1=' + this.queryKey1).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.fromData = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    }

  }
}
</script>

<style scoped>
.add-link {
  margin: 18px 0 15px 10px;
  float: left;
}
</style>
